<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <head jsf:id="head">    
        <title>Notifications</title>
        <link href="css/meteocal.css" rel="stylesheet" type="text/css"/>
    </head>
    <body jsf:id="body" class="noFrame">  
         <!--Element of the first line on the top bar-->
        <div id="topHeader">
             <img id="logo" src="Images/meteocalsnow.png"  name="meteocalLogo" title="meteocallogo"/>
             <h1 id="userCalendar">#{loginBean.loggedUser.username}'s Calendar</h1>   
             
            <div class="logoutForm">        
                <h:form>
                    <p:commandButton value="Logout" action="#{loginBean.logout()}"/>                     
                </h:form>
            </div>
        </div>
       
        <div id="searchHeader">
            <h:form id="search">
                <p:inputText id="searchText" value="#{SearchController.searchedUser}" />
                <p:commandButton id="searchButton" value="Search"  action="#{SearchController.searchUser()}"/>    
            </h:form>   
        </div>
         
         <div id="LeftHeader">
             <ul class="buttonList">
                 <li><p:commandButton class="leftBarButton"  value="Home" action="#{scheduleController.loadOwnCalendar()}"/></li>   
                 <li><p:commandButton class="leftBarButton"  value="AddEvent" action="#{EventController.newEvent}"/></li>         
                 <li><p:button class="leftBarButton"  value="Notifications" outcome="notifications"/></li>  
                 <li><p:button class="leftBarButton"  value="Settings" outcome="settings"/> </li>  
             </ul>
        </div>

        <div id="notificationForm">
            <h:form>
                <p:dataTable var="notification" value="#{notificationsController.userNotification}" rows="10"
                            paginator="true"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="5,10,15">
                    <p:column headerText="Notification">                        
                        <h:outputText id="text1" value="NEW! #{notification.type}  notification       "  style="font-weight: bolder; display: #{notificationsController.isNotVisualized(notification)}"/>
                        <h:outputText id='text2' value="#{notification.type} notification       "  style="display: #{notificationsController.isVisualized(notification)}"/>
                        <p:commandButton value="show" icon="ui-icon-extlink" update="text1, text2" >
                            <f:setPropertyActionListener value="#{notification}" target="#{notificationsController.selectedNotification}" />
                        </p:commandButton>

                    </p:column>
                   </p:dataTable>  

                   <p:dialog id="dialog" header="Notification" widgetVar="notificationDialog" resizable="false" onShow="updateDialog()"  >
                       <p:remoteCommand name="updateDialog" update="dialogContent, eventButton"/>
                       <h:outputText id="dialogContent" value=" #{notificationsController.selectedNotification.description}"/>
                       <br/>
                       <br/>
                       <br/>
                       <p:commandButton id="eventButton" value="Go To Event" action="#{notificationsController.showEvent()}"  style="display: #{notificationsController.hasEvent()}"/>

                   </p:dialog>

                <p:dialog id="eventDeleted" header="Error" widgetVar="eventDeleted" resizable="false">
                    Error the event search was deleted.
                </p:dialog>
            </h:form>
        </div>



    </body>
</html>

